﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表渲染</title>
    <script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="appOne">
			<!--template 模板占位符,可以帮助包裹元素,
			也就是template作用域里面的元素直接可以用
			template遍历或操作出来的数据,
			template标签本身不会被渲染在页面上
			-->
			<template v-for="(item, index) of citys"
					:key="item.id"><!--key值为每个列表下id的唯一键名-->
				<ul>
				<li> 
					   {{index}} - {{item.province}}
				</li>
			    </ul>
			    <span>{{item.province}}</span>
			</template>
		</div>
		
		<div id="app">
		    <div v-for="(key, item, index) of userInfo">
		    	{{item}} - {{key}} -{{index}} <!--key:键名-->
		    </div>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					citys:[
					{id:"01",province:"西安"},
					{id:"02",province:"北京"},
					{id:"03",province:"广州"},
					{id:"04",province:"上海"}
					]
					,
					userInfo:{
						name:"Dell",
						age:28,
						gender:"男"
					}
					
				}
			})
			/*set可以实现内容和页面同时改变*/
			/*使用数组变异的方法使得数组发生改变*/
			/*一个是改变对象或数组的引用,一种是set添加属性*/
			/*Vue.set(app.userInfo,1,3)  改版下标1改为数字3*/
			/*Vue.$set(app.userInfo,1,3)  改版下标1改为数字3*/
			/*Vue.set(app.userInfo,"邓超","30")*/
			/*遍历对象或数组建议舒勇 for of循环*/
		</script>
	</body>
</html>
